import React, { Component } from 'react'
import { Card, Table, Tag, Space, Button } from 'antd';
import { getCategoriesAPI } from './../../apis/categoryAPI'
import AddCateModal from '../../components/addCateModal';

export default class index extends Component {
    state = {
        parentId: 0,
        data: [],
        isModalVisible: false
    }
    showAddModal = (boo) => {
        this.setState({
            isModalVisible: boo
        })
    }
    backCate = () => {
        //延时让setState变为同步
        setTimeout(() => {
            this.setState({ parentId: 0 })
            this.getCategories()
        }, 0);
    }
    showSubCate = async (rowData) => {
        console.log(rowData);
        //延时让setState变为同步
        setTimeout(() => {
            this.setState({ parentId: rowData._id })
            this.getCategories()
        }, 0);


    }
    getCategories = async () => {
        const res = await getCategoriesAPI({ parentId: this.state.parentId })
        console.log('getCategories()', res);
        this.setState({
            data: res.data.data.data
        })
    }
    componentDidMount() {
        this.getCategories()
    }
    render() {
        const { data, parentId, isModalVisible } = this.state
        const columns = [
            {
                title: '类型名字',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '类别',
                dataIndex: 'type',
                key: 'type',
            },

            {
                title: '操作',
                key: '',
                dataIndex: '',
                render: rowData => (
                    <>
                        {parentId == 0 ? <Button className="ant-btn-primary" onClick={() => this.showSubCate(rowData)}>查看子分类</Button> : null}
                        &nbsp; &nbsp; &nbsp;
                        <Button>删除</Button>
                    </>
                ),
            },

        ];
        return (
            <div>
                <AddCateModal getCategories={this.getCategories} isModalVisible={isModalVisible} showAddModal={this.showAddModal}></AddCateModal>
                <Card title={parentId == 0 ? "商品分类" : <Button onClick={this.backCate}>返回</Button>} extra={<Button onClick={() => this.showAddModal(true)}>添加</Button>} style={{ width: "100%" }}>
                    <Table rowKey="_id" columns={columns} dataSource={data} pagination={{ defaultPageSize: 5, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: ['5', '10', '15', '20'] }} />

                </Card>
            </div>
        )
    }
}
